<template>
  <div class="WriteAnArticle">
    <div class="info-content">
      <!-- 头部展示 -->
      <div class="info-top-title">
        <div>
          <span class="myInfo">更写文章</span
          ><span class="english"> Write an article</span>
          <span class="asd"></span>
        </div>
      </div>
    </div>
    <!-- 写文章 -->
    <div class="write-article">
      <!-- 左边区域 -->
      <div class="write-article-left">
        <h1 class="page-header">更写文章</h1>
        <!-- 标题 -->
        <div class="add-article-box">
          <h2 class="add-article-box-title"><span>标题</span></h2>
          <div class="add-article-box-content">
            <el-input placeholder="在此处输入标题" v-model="title" clearable>
            </el-input>
            <span class="prompt-text">请文明书写，规范格式</span>
          </div>
        </div>
        <!-- 富文本 -->
        <div class="form-group">
          <div ref="editor" id="article_content" class="edui-default"></div>
        </div>
        <!-- 关键字 -->
        <div class="add-article-box">
          <h2 class="add-article-box-title"><span>关键字</span></h2>
          <div class="add-article-box-content">
            <el-input
              placeholder="在此处输入关键字"
              v-model="keyword"
              clearable
            >
            </el-input>
            <span class="prompt-text">请文明书写，规范格式</span>
          </div>
        </div>
        <!-- 描述 -->
        <div class="add-article-box">
          <h2 class="add-article-box-title"><span>描述</span></h2>
          <div class="add-article-box-content">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="describe"
            >
            </el-input>
            <span class="prompt-text">请文明书写，规范格式</span>
          </div>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="write-article-right">
        <h1 class="page-header">操作</h1>
        <!-- 文章标题/标签 -->
        <div class="add-article-box1">
          <h2 class="add-article-box-title"><span>文章标题/标签</span></h2>
          <div class="add-article-box-content">
            <ul class="category-list">
              <li v-for="(item, index) in classifitionData" :key="index">
                <label>
                  <el-radio
                    @change="classiRadio"
                    v-model="classifition"
                    :label="item.classiId"
                    border
                    >{{ item.classiName }}</el-radio
                  >
                </label>
              </li>
            </ul>
          </div>
        </div>
        <!-- 文章分类 -->
        <div class="add-article-box1">
          <h2 class="add-article-box-title"><span>文章分类</span></h2>
          <div class="add-article-box-content">
            <ul class="category-list">
              <el-checkbox-group v-model="checkedCities" :max="2" :min="1">
                <li v-for="(item, index) in sortData" :key="index">
                  <label>
                    <el-checkbox :label="item.docId" border>{{
                      item.docName
                    }}</el-checkbox>
                  </label>
                </li>
              </el-checkbox-group>
            </ul>
          </div>
        </div>
        <!-- 文章上传图片 -->
        <div class="add-article-box1">
          <h2 class="add-article-box-title"><span>文章标题图片</span></h2>
          <div class="add-article-box-content">
            <!-- <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/wangUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload> -->
            <div @click="clickimg" data_d="1" ref="upload">
              <el-upload
                action="http://localhost:8081/wangUpload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
          </div>
        </div>
        <!-- 发布 -->
        <div class="add-article-box1">
          <h2 class="add-article-box-title"><span>发布</span></h2>
          <div class="add-article-box-content">
            <p>
              <label>状态：</label
              ><span class="article-status-display">撰写中..</span>
            </p>
            <p>
              <label>公开度：</label>
              <el-radio-group v-model="state">
                <label>
                  <el-radio @change="stateRadio" :label="0" border
                    >私密</el-radio
                  >
                </label>
                <label style="margin-left: 10px">
                  <el-radio @change="stateRadio" :label="1" border
                    >公开</el-radio
                  >
                </label>
              </el-radio-group>
            </p>
            <p>
              <label>发布于：</label
              ><span class="article-time-display"
                ><input
                  style="border: none"
                  type="datetime"
                  name="time"
                  value=""
                />{{ dateTime}}</span
              >
            </p>
          </div>
          <div class="add-article-box-footer">
            <button
              id="sub"
              class="btn btn-primary"
              type="button"
              name="submit"
              @click="submitArticleInfo"
            >
              发布
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Editors from "wangeditor";
import axios from "axios";
import hljs from 'highlight.js'
export default {
  name: "UpdateAnArticleEditor",
  data() {
    return {
      classifitionData: [], //类型
      sortData: [], //标签
      artId:"",
      title: "", //标题
      keyword: "", //关键字
      describe: "", //描述
      classifition: 2, //分类类型
      checkedCities: [], //标签
      // imageUrl: "", //图片
      dialogImageUrl: "", //图片
      realImageUrl: "", //真实服务器图片地址
      state: 0, //发布时状态0私密 1公开
      dialogVisible: false,
      addVisible: true,
      editor: null,
      dateTime:"",//时间格式
      userInfo:this.$store.state.user,
      routerData:null
    };
  },
  created(){
    //获取路由过来的数据进行值赋值
    this.routerGetArticleData()
     //监听浏览器刷星
    window.addEventListener("beforeunload", this.beforeunloadFn());
  },
  mounted() {
    
    //调用富文本
    this.aba();
    //调用查询分类
    this.selectClassifition();
    //调用查询标题
    this.selectType();
    //当前时间格式转换
    setInterval(() => {
        this.dateFormat() ;
    }, 1000);
    
  },
  methods: {
    //获取路由中传递的参数
    routerGetArticleData(){
     this.routerData =  this.$route.params.articleData;
      if(this.routerData != null){
        const data = this.routerData;
        //进行赋值操作
        this.artId = data.artId;
        this.title = data.artTitle;
        this.keyword = data.artKeyword;
        this.describe = data.artDescribe;
        this.classifition = data.classifications[0].classiId;
        if(data.documentTypes!=null || data.documentTypes != "undefined"){
          data.documentTypes.forEach(element => {
             this.checkedCities.push(element.docId)
          });
        }

        this.realImageUrl = data.aetImg;
        this.state = data.artStatus
      } 
    },
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat() {
      var date = new Date();
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        this.dateTime =  year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
    },
    submitArticleInfo() {
      var that = this;
      // 进行数据校验
      if(this.title==null || this.title == "" ||
        this.editor.txt.html() == null || this.editor.txt.html() == "" || typeof this.editor.txt.html()== "undefined" ||
        this.keyword == null || this.keyword == "" ||
        this.describe == null || this.describe == "" ||
        this.classifition == null || this.classifition == "" ||
        this.checkedCities== null || this.checkedCities.length==0 ||
        this.realImageUrl == null || this.realImageUrl == ""

      ){
       
        this.open4("请填写完整的数据")
      }else if(this.userInfo == null || this.userInfo == 0 || typeof this.userInfo == "undefined"){
           this.open4("请先登录")
      }else{
       
          //发布信息
      axios({
        method:"post",
        url:"/aabbcc/article/updateArticle",
        data:{
          artId:that.artId,
          userId:that.userInfo,
          articleTitle:that.title,
          articleContent:that.editor.txt.html()+"<p><strong><br></strong></p>",
          articleKeywords:that.keyword,
          articleDescribe:that.describe,
          articleClassiId:that.classifition,
          articleDocId:that.checkedCities,
          img:that.realImageUrl,
          status:that.state
        }
      })
      .then(function(res){
        if(res.data.code==200){
            that.open2(res.data.massage+"，即将进入展示页面")
            setTimeout(() => {
                 that.$router.push({
                  name:"articlemanagement"
                })
            }, 4000);
        }else{
          that.open4(res.data.massage)
        }
      })
      
      }
     
    
    },
    // radio获取值
    classiRadio(item) {
      alert(item);
      
    },
    //获取发布状态
    stateRadio() {},
    // 富文本
    aba() {
      const editor = new Editors(this.$refs.editor);
      editor.config.emotions = [
        {
          title: "新浪", // tab 的标题
          type: "image", // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
          content: [
            {
              alt: "[坏笑]",
              src: `http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif`,
            },
            {
              alt: "[舔屏]",
              src: `http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif`,
            },
            {
              alt: "[浮云]",
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif",
              alt: "[给力]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif",
              alt: "[围观]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif",
              alt: "[威武]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif",
              alt: "[熊猫]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif",
              alt: "[兔子]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif",
              alt: "[奥特曼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
              alt: "[囧]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
              alt: "[互粉]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif",
              alt: "[礼物]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
              alt: "[呵呵]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
              alt: "[嘻嘻]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
              alt: "[哈哈]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
              alt: "[可爱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
              alt: "[可怜]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
              alt: "[挖鼻屎]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
              alt: "[吃惊]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
              alt: "[害羞]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
              alt: "[挤眼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
              alt: "[闭嘴]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
              alt: "[鄙视]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
              alt: "[爱你]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
              alt: "[泪]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
              alt: "[偷笑]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
              alt: "[亲亲]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
              alt: "[生病]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
              alt: "[太开心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
              alt: "[懒得理你]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
              alt: "[右哼哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
              alt: "[左哼哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
              alt: "[嘘]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
              alt: "[衰]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
              alt: "[委屈]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
              alt: "[吐]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
              alt: "[打哈欠]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
              alt: "[抱抱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
              alt: "[怒]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
              alt: "[疑问]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
              alt: "[馋嘴]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
              alt: "[拜拜]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
              alt: "[思考]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
              alt: "[汗]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
              alt: "[困]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
              alt: "[睡觉]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
              alt: "[钱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
              alt: "[失望]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
              alt: "[酷]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
              alt: "[花心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
              alt: "[哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
              alt: "[鼓掌]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
              alt: "[晕]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
              alt: "[悲伤]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
              alt: "[抓狂]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
              alt: "[黑线]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
              alt: "[阴险]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
              alt: "[怒骂]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
              alt: "[心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
              alt: "[伤心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
              alt: "[猪头]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
              alt: "[ok]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
              alt: "[耶]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
              alt: "[good]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
              alt: "[不要]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
              alt: "[赞]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
              alt: "[来]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
              alt: "[弱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
              alt: "[蜡烛]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
              alt: "[蛋糕]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif",
              alt: "[钟]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif",
              alt: "[话筒]",
            },
          ],
        },
      ];
      //显示表情img
      editor.config.emotionsShow = "icon";
      //配置行高
      editor.config.lineHeights = ["1", "1.15", "1.6", "2", "2.5", "3"];
      //配置文字颜色
      editor.config.colors = [
        "#000000",
        "#eeece0",
        "#1c487f",
        "#4d80bf",
        "red",
        "black",
        "orange",
        "blue",
      ];
      // 配置字体
      editor.config.fontNames = [
        "黑体",
        "仿宋",
        "楷体",
        "标楷体",
        "华文仿宋",
        "华文楷体",
        "宋体",
        "微软雅黑",
        "Arial",
        "Tahoma",
        "Verdana",
        "Times New Roman",
        "Courier New",
      ];
      // 默认情况下，显示所有菜单
      editor.config.menus = [
        "head",
        "bold",
        "fontSize",
        "fontName",
        "italic",
        "underline",
        "strikeThrough",
        "indent",
        "lineHeight",
        "foreColor",
        "backColor",
        "link",
        "list",
        "todo",
        "justify",
        "quote",
        "emoticon",
        "image",
        "video",
        "table",
        "code",
        "splitLine",
        "undo",
        "redo",
      ];
      // 配置 富文本编辑器 上传图片的接口
      editor.config.uploadImgServer = "/aabbcc/wangUpload";
      //设置上传图片http请求参数名，
      editor.config.uploadFileName = "file";
      // 一次最多上传图片的数量
      editor.config.uploadImgMaxLength = 1;
      //富文本编辑器提示信息
      editor.config.placeholder = "亲，请记得编辑你的内容哦";
      editor.config.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 3M
      editor.config.uploadImgMaxLength = 5;
      editor.config.uploadImgHooks = {
        success: function (xhr, editor, result) {
          // insertImg(result.data[0]);
          console.log(result);
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
          console.log(result);
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
      };
      // 挂载highlight插件
      editor.highlight = hljs;
      editor.destroy();
      editor.config.height = 500
      editor.lineHeights=800
      editor.create();
      if(this.routerData != null || typeof this.routerData != "undefined"){
        editor.txt.html(this.routerData.artContent)
      }

      this.editor = editor;
    },
    // 查询类型
    selectClassifition() {
      const that = this;
      //查询类型
      axios({
        method: "get",
        url: "/aabbcc/classifiation/selectAllClassifiation",
      })
        .then(function (response) {
          that.classifitionData = response.data.obj;
        })
        .catch(function (error) {});
    },
    //查询标签
    selectType() {
      //查询标题
      //查询类型
      const that = this;
      axios({
        method: "get",
        url: "/aabbcc/sort/selectAllArticleSort",
      })
        .then(function (response) {
          that.sortData = response.data.obj;
        })
        .catch(function (error) {});
    },
    handleRemove(file, fileList) {
      
      axios({
        method: "get",
        url: "/aabbcc/deletewangUpload",
        params: {
          url: this.realImageUrl,
        },
      }).then(function (res) {});
      setTimeout(() => {
          this.realImageUrl = ""
      }, 100);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.addVisible = false;
    },
    handleSuccess(response, file, fileList) {
      this.realImageUrl = response.data[0];
    },
    clickimg() {
      // if( this.$refs.upload.getAttribute("data_d") == 1){
      //   this.$refs.upload.querySelector(".el-upload").style.display="none"
      //    this.$refs.upload.querySelector(".el-upload").style.transition=" all 0.8s"
      //   this.$refs.upload.setAttribute("data_d",2)
      // }
    },

    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
     //监听浏览器刷新
    beforeunloadFn() {
      //刷星去评论列表
      if (this.routerData == null || typeof this.routerData == "undefined") {
        this.$router.push({
         name:"articlemanagement"
        })
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>

/* 写文章 */
.write-article {
  width: 103%;
  margin-top: 20px;
  margin-left: -18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.w-e-text-container{
  height: 500px !important;
}

/* 写文章左边 */
.write-article-left {
  width: 72%;
  height: 100%;
}
.page-header {
  font-size: 20px;
  font-weight: 450;
  margin-top: 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 9px;
  margin: 11px 0 20px;
}

.add-article-box {
  width: 98.2%;
  margin-left: 12px;
  background: #fff;
  margin-bottom: 20px;
  margin-top: 20px;
  -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);
  box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);
}
.add-article-box1 {
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
  margin-top: 20px;
  box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);
}
.add-article-box-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding: 8px 10px;
  margin: 0;
  border-bottom: #eee solid 1px;
}
.add-article-box-content {
  padding: 10px 15px;
}
.prompt-text {
  display: inline-block;
  color: #888;
  font-size: 12px;
  margin: 2px;
}
.form-group {
  width: 98.2%;
  margin-left: 13px;
}

.btn {
  margin-top: 5px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default,
.btn-primary {
  color: #fff;
  background-color: #3399cc;
}

/* 写文章右边 */
.write-article-right {
  width: 25%;
  height: 100%;
}
.category-list {
  margin-left: 1px;
  margin-top: -10px;
}
.category-list > li {
  display: list-item;
  list-style: none;
  text-align: -webkit-match-parent;
  margin-top: 12px;
}
.add-article-box-content li {
  display: list-item;
  list-style: none;
  text-align: -webkit-match-parent;
  margin-top: 12px;
}
.add-article-box-content label {
  font-weight: 500;
  cursor: pointer;
}
.a-upload {
  box-shadow: 0px 0px 15px #ddd;
  padding: 7px 10px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  color: #fff;
  background: #3399cc;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  transition: all 0.7s;
}
.a-upload:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
  transition: all 0.7s;
}
.a-upload > input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}
.add-article-box-content > p {
  font-weight: 500;
  color: #333;
  font-size: 15px;
  margin-top: 5px;
}
.add-article-box-footer {
  border-top: #eee solid 1px;
  padding: 5px 10px;
  background: #f8f8f8;
  height: 45px;
  clear: both;
}
.add-article-box-footer button {
  float: right;
}

.WriteAnArticle {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
  color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}

/* 图片上传element */
.avatar-uploader {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  cursor: pointer;
  backface-visibility: red !important;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  margin-left: 33px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>